<!-- 折旧增值维修 -->
<template>
  <div class="depreciation">
    <div class="depreciation_content_left">
      <div @click="toRepair" class="title">设备维修金额占比图</div>
      <pieChart id="repairPieChart" ref="repairPieChart" height="35%" width="90%"></pieChart>
      <div class="depreciation_content_left_button">
        <el-radio-group v-model="radio" @change="changeType">
          <el-radio-button label="按区域"></el-radio-button>
          <el-radio-button label="按项目"></el-radio-button>
        </el-radio-group>
      </div>
      <tableBox class="region" :data="tableData" :show-serial-number="false" :showThead="true" :thead-list="tableThead"
        @toProjectAssetsList="toProjectAssetsList">
      </tableBox>

    </div>
    <div class="depreciation_content_right">
      <div class="depreciation_content_right_content">
        <div v-for="(item, index) in equipmentTableData" :key="index" class="equipment">
          <div class="img_box">
            <img :src="imgs[index].src" alt="暂无图片" width="100%" height="100%" @click="toRecordList(imgs[index].id)">
          </div>
          <tableBox :data="item" :show-serial-number="false" :showThead="false"></tableBox>
        </div>
      </div>
      <el-pagination background layout="prev, pager, next" :total="total" class="equipment_page"
        @current-change="handleCurrentChange" @prev-click="prev" @next-click="next">
      </el-pagination>
    </div>

  </div>
</template>
<script>
import tableBox from "../components/tableBox.vue"
import pieChart from "../components/pieChart.vue"
import lineBarChart from "../components/lineBarChart.vue"
import { getAssetsRepairRate, getProjectAssetsInfoTable, getAssetsInfoList } from "@/api/bi/assetsAndMaterials";

export default {
  components: { lineBarChart, tableBox, pieChart },
  data() {
    return {
      load: null,
      radio: '按区域',
      tableData: [],
      projectTableData: [],
      tableThead: ['区域', '原值', '净值', '折旧', '增值', '投放', '维修', '维修费用', '维修占比'],
      equipmentTableData: [],
      imgs: [],
      total: 0,
      pageNum: 1,
    }
  },
  mounted() {
    this.load = this.$loading({
      lock: true,
      text: '加载中...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    this.getPieChartData()
    this.getTableData(1)
    this.getEquipmentList()
  },
  methods: {
    changeType(val) {
      this.load = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      if (val == '按项目') {
        this.tableThead = ['项目名称', '原值', '净值', '折旧', '增值', '投放', '维修', '维修费用', '维修占比']
        this.getTableData(2)
      } else {
        this.tableThead = ['区域', '原值', '净值', '折旧', '增值', '投放', '维修', '维修费用', '维修占比']
        this.getTableData(1)
      }

      setTimeout(() => {
        this.load.close()
      }, 2000)
    },
    // 获取设备维修金额占比
    async getPieChartData() {
      const { data: res } = await getAssetsRepairRate();
      let legend = {
        orient: 'vertical',
        right: 0,
        // top: 'center',
        bottom: 20,
      }
      let chartData = []
      res.forEach(item => {
        chartData.push({ value: item.repairRate, name: item.assetsName })
      })
      this.$refs.repairPieChart.initChart(chartData, legend, null, '70%')
    },
    // 获取表格数据
    async getTableData(paramType) {
      const { data: res } = await getProjectAssetsInfoTable({ paramType });
      let style = "cursor: pointer;color:#409EFF"
      let arr = []
      let originalMoneyTotal = 0
      let worthMoneyTotal = 0
      let depreciationMoneyTotal = 0
      let addednMoneyTotal = 0
      let launchNumberTotal = 0
      let repairNumberTotal = 0
      let sumRepairMoneyTotal = 0
      let repairRateTotal = 0
      res.forEach(item => {
        arr.push([{ val: this.radio == '按区域' ? item.projectRegion : item.projectName, click: 'toProjectAssetsList', key: item.projectId, style: this.radio == '按区域' ? '' : style },
        { val: this.formatPrice(item.originalMoney) },
        { val: this.formatPrice(item.worthMoney) },
        { val: this.formatPrice(item.depreciationMoney) },
        { val: this.formatPrice(item.addednMoney) },
        { val: this.formatPrice(item.launchNumber) },
        { val: this.formatPrice(item.repairNumber) },
        { val: this.formatPrice(item.sumRepairMoney) },
        { val: item.repairRate + '%' }])

        originalMoneyTotal = originalMoneyTotal + item.originalMoney
        worthMoneyTotal = worthMoneyTotal + item.worthMoney
        depreciationMoneyTotal = depreciationMoneyTotal + item.depreciationMoney
        addednMoneyTotal = addednMoneyTotal + item.addednMoney
        launchNumberTotal = launchNumberTotal + item.launchNumber
        repairNumberTotal = repairNumberTotal + item.repairNumber
        sumRepairMoneyTotal = sumRepairMoneyTotal + item.sumRepairMoney
        repairRateTotal = repairRateTotal + item.repairRate
      })


      if (this.radio == '按项目') {
        let totalLine = [{ val: '合计' },
        { val: this.formatPrice(originalMoneyTotal) },
        { val: this.formatPrice(worthMoneyTotal) },
        { val: this.formatPrice(depreciationMoneyTotal) },
        { val: this.formatPrice(addednMoneyTotal) },
        { val: this.formatPrice(launchNumberTotal) },
        { val: this.formatPrice(repairNumberTotal) },
        { val: this.formatPrice(sumRepairMoneyTotal) },
        { val: repairRateTotal + '%' },]
        this.tableData = [totalLine, ...arr]
      } else {
        this.tableData = [...arr]

      }
    },
    // 获取设备列表
    async getEquipmentList() {
      const { rows: res, total } = await getAssetsInfoList({ pageNum: this.pageNum, pageSize: 10 });
      this.total = total
      let arr = []
      let img = []
      res.forEach(item => {
        img.push({ src: item.assetsImg, id: item.assetsId })
        arr.push([
          [{ val: '名称' }, { val: item.assetsName, colspan: 3 }],
          [{ val: '型号' }, { val: item.assetsModel }, { val: '数量' }, { val: item.assetsNumber }],
          [{ val: '新机' }, { val: item.newNumber }, { val: '原值' }, { val: item.originalMoney }],
          [{ val: '投放' }, { val: item.launchNumber }, { val: '净值' }, { val: item.worthMoney }],
          [{ val: '闲置' }, { val: item.leaveNumber }, { val: '折旧' }, { val: item.depreciationMoney }],
          [{ val: '维修' }, { val: item.repairNumber }, { val: '增值' }, { val: item.addednMoney }],
        ])
      })
      this.imgs = img
      this.equipmentTableData = [...arr]
      this.load.close()

    },
    handleCurrentChange(val) {
      this.load = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.pageNum = val
      this.getEquipmentList()
    },
    prev(val) {
      this.pageNum = val
    },
    next(val) {
      this.pageNum = val
    },
    toProjectAssetsList(key) {
      if (this.radio == '按区域') return
      this.$router.push("/project/add-projectAssets/projectAssetsList/" + key);
    },
    toRepair() {
      this.$router.push("/cloudManage/asset/repair");
    },
    toRecordList(id) {
      this.$router.push("/CldAssetsRecord/add-assetsRecord/recordList/" + id);

    },
    formatPrice(price) {
      return price.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },



  }

}
</script>
<style lang="scss" scoped>
.depreciation {
  background: #F2F4FC;
  height: 100%;
  width: 100%;
  display: flex;

  .title {
    cursor: pointer;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
  }

  .depreciation_content_left {
    background-color: rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    padding: 22px;
    box-sizing: border-box;
    width: 35%;
    height: 100%;

    .depreciation_content_left_button {
      // flex-grow: 1;
      // overflow: hidden;
      // display: flex;
      // flex-direction: column;
      // box-sizing: border-box;


    }

    .region {
      height: 30%;
      margin: 20px 0;
    }
  }

  .depreciation_content_right {
    background-color: rgba(255, 255, 255, 0.6);
    height: 100%;
    width: 60%;
    flex-grow: 1;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    padding: 22px 0;
    box-sizing: border-box;

    .depreciation_content_right_content {
      height: 90%;
      display: flex;
      flex-wrap: wrap;
      flex-grow: 1;
      box-sizing: border-box;
      align-content: flex-start;

      .equipment {
        width: 50%;
        height: 20%;
        display: flex;
        padding: 0 0px 16px 20px;
        box-sizing: border-box;

        .img_box {
          width: 40%;
          background: #fff;
          cursor: pointer;
        }
      }


    }

    .equipment_page {
      height: 3%;
      margin: 0 20px 0 20px;
      text-align: right;
      flex-shrink: 0;
    }
  }



}
</style>